<template>
  <div class="rental-space-management">
    <!-- 面积统计区域 -->
    <div class="top-stats">
      <div class="stat-item">
        <h4>管理面积</h4>
        <p>{{ totalManagementArea }} m²</p>
      </div>
      <div class="stat-item">
        <h4>租赁面积</h4>
        <p>{{ rentedArea }} m²</p>
      </div>
      <div class="stat-item">
        <h4>空置面积</h4>
        <p>{{ vacantArea }} m²</p>
      </div>
    </div>

    <!-- 筛选功能 -->
    <div class="filters">
      <label>租赁状态：</label>
      <select v-model="filters.status" class="filter-input">
        <option value="all">全部</option>
        <option value="rented">已租赁</option>
        <option value="vacant">空闲</option>
      </select>
      <label>租金：</label>
      <input
        type="number"
        v-model="filters.minRent"
        placeholder="最小租金"
        class="filter-input"
      />
      <input
        type="number"
        v-model="filters.maxRent"
        placeholder="最大租金"
        class="filter-input"
      />
      <label>到期时间：</label>
      <input type="date" v-model="filters.expiryDate" class="filter-input" />
      <button @click="applyFilters" class="filter-button">应用筛选</button>
    </div>

    <!-- 空间展示区域 -->
    <div class="space-grid">
      <div
        v-for="space in filteredSpaces"
        :key="space.id"
        :class="['space-item', space.status === 'vacant' ? 'vacant' : 'rented']"
        @click="showSpaceDetails(space)"
      >
        <div class="space-info">
          <h3>{{ space.name }}</h3>
          <p>状态: {{ space.status === 'vacant' ? '空闲' : '已租赁' }}</p>
          <p>起始日期: {{ formatDate(space.startDate) }}</p>
          <p>到期日期: {{ formatDate(space.expiryDate) }}</p>
          <p>租金: ￥{{ space.rent }}</p>
          <p>租金: {{ space.area }}</p>
          <p>合同编号: {{ space.contractId }}</p>
        </div>
      </div>
    </div>

    <!-- 空间详情弹窗 -->
    <div v-if="selectedSpace" class="space-details-modal">
      <div class="modal-content">
        <!-- 关闭按钮 -->
        <button @click="closeDetailsModal" class="close-btn">&times;</button>

        <h2>租赁空间详情</h2>
        <!-- 显示信息或编辑模式 -->
        <div v-if="!isEditing">
          <p><strong>店铺名称:</strong> {{ selectedSpace.name }}</p>
          <p><strong>租赁合同编号:</strong> {{ selectedSpace.contractId }}</p>
          <p><strong>租赁状态:</strong> {{ selectedSpace.status }}</p>
          <p><strong>面积:</strong> {{ selectedSpace.area }}</p>
          <p>
            <strong>租赁起始日期:</strong>
            {{ formatDate(selectedSpace.startDate) }}
          </p>
          <p>
            <strong>租赁到期日期:</strong>
            {{ formatDate(selectedSpace.expiryDate) }}
          </p>
          <p><strong>租金:</strong> ￥{{ selectedSpace.rent }}</p>
          <p><strong>支付方式:</strong> {{ selectedSpace.paymentMethod }}</p>
          <p><strong>租赁历史:</strong></p>
          <ul>
            <li v-for="record in selectedSpace.history" :key="record.id">
              {{ record.date }} - {{ record.action }}
            </li>
          </ul>
          <button @click="toggleEditMode" class="edit-button">编辑</button>
        </div>

        <!-- 编辑模式 -->
        <div v-else>
          <label>租赁状态:</label>
          <select v-model="selectedSpace.status" class="edit-input">
            <option value="vacant">空闲</option>
            <option value="rented">已租赁</option>
          </select>
          <label>租金:</label>
          <input
            v-model="selectedSpace.rent"
            type="number"
            class="edit-input"
          />
          <label>合同编号:</label>
          <input
            v-model="selectedSpace.contractId"
            type="text"
            class="edit-input"
          />
          <label>支付方式:</label>
          <input
            v-model="selectedSpace.paymentMethod"
            type="text"
            class="edit-input"
          />
          <button @click="updateSpace(selectedSpace)" class="save-button">
            保存
          </button>
          <button @click="toggleEditMode" class="cancel-button">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const spaces = ref([
  {
    id: 1,
    name: '商铺A',
    status: 'rented',
    startDate: '2023-01-01',
    expiryDate: '2023-12-31',
    rent: 1000,
    contractId: 'C001',
    paymentMethod: '月付',
    history: [{ id: 1, date: '2023-01-01', action: '首次租赁' }],
    reminderTime: 10,
    area: 50
  },
  {
    id: 2,
    name: '商铺B',
    status: 'vacant',
    startDate: '2023-03-01',
    expiryDate: '2024-03-01',
    rent: 1200,
    contractId: 'C002',
    paymentMethod: '年付',
    history: [],
    reminderTime: 30,
    area: 60
  }
])

const filters = ref({
  status: 'all',
  minRent: null,
  maxRent: null,
  expiryDate: null
})

const selectedSpace = ref(null)
const isEditing = ref(false)

// 计算租赁面积、空置面积、管理面积
const rentedArea = computed(() => {
  return spaces.value
    .filter((space) => space.status === 'rented')
    .reduce((sum, space) => sum + space.area, 0)
})

const vacantArea = computed(() => {
  return spaces.value
    .filter((space) => space.status === 'vacant')
    .reduce((sum, space) => sum + space.area, 0)
})

const totalManagementArea = computed(() => {
  return rentedArea.value + vacantArea.value
})

// 过滤空间
const filteredSpaces = computed(() => {
  return spaces.value.filter((space) => {
    const statusMatch =
      filters.value.status === 'all' || space.status === filters.value.status
    const rentMatch =
      (!filters.value.minRent || space.rent >= filters.value.minRent) &&
      (!filters.value.maxRent || space.rent <= filters.value.maxRent)
    const expiryDateMatch =
      !filters.value.expiryDate ||
      new Date(space.expiryDate) <= new Date(filters.value.expiryDate)
    return statusMatch && rentMatch && expiryDateMatch
  })
})

// 格式化日期
const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleDateString()
}

// 展示空间详情
const showSpaceDetails = (space) => {
  selectedSpace.value = { ...space }
}

// 切换编辑模式
const toggleEditMode = () => {
  isEditing.value = !isEditing.value
}

// 更新空间信息
const updateSpace = (space) => {
  // 在此处理更新后的空间信息
  console.log('更新空间信息:', space)
  toggleEditMode()
}

// 应用筛选
const applyFilters = () => {
  // Trigger a re-computation of filtered spaces
}

// 关闭详情弹窗
const closeDetailsModal = () => {
  selectedSpace.value = null
}
</script>

<style scoped>
.rental-space-management {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background-color: #f8f9fa;
}

.top-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.stat-item {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  flex: 1;
  margin: 0 10px;
}

.stat-item h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #495057;
}

.filters {
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.filter-button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.filter-button:hover {
  background-color: #0056b3;
}

.space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.space-item {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.space-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.space-item.vacant {
  background-color: #d4f5d4; /* Green for vacant */
}

.space-item.rented {
  background-color: #f8d7b9; /* Orange for rented */
}

.space-info {
  text-align: center;
}

.space-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
}

.close-btn:hover {
  color: #333;
}

.edit-button,
.save-button,
.cancel-button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 15px; /* 增加右边距 */
}

.save-button:hover,
.cancel-button:hover,
.edit-button:hover {
  background-color: #0056b3;
}

.edit-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>
